import React from 'react'
// 引入图片 css样式
import wxqq from '../../../static/img/LoginReg/wxqq.png';
import yzm from '../../../static/img/LoginReg/yzm.png';
import './index.css'
import { Form, Input, Button, Checkbox } from 'antd';
export default function forneLogin() {
    const onFinish = (values) => {
        // console.log(values.username);
        console.log('Success:', values);
    };
    const onFinishFailed = (errorInfo) => {

        console.log('Failed:', errorInfo);
    };

    return (
        <div className='for-login'>
            <ul>
                <li className='for-1'><span>重置密码</span></li>

                <Form
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    {/* 用户输入框 */}
                    <Form.Item
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '手机号码不正确，请重新输入',
                            },
                        ]}
                        hasFeedback
                    >
                        <Input style={{ height: '42px', width: '305px' }} placeholder="请输入手机号" />
                    </Form.Item>
                    {/* 验证码栏 */}
                    <Form.Item
                        name="foryzm"

                    >
                        <Input style={{ height: '42px', width: '111px' }} placeholder="验证码" />
                    </Form.Item>
                    <div className='for-img'>
                        <img src={yzm} alt="" />
                        <span>看不清换一张</span>
                    </div>

                    {/* 请输入密码 */}
                   
                        <Form.Item name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码',
                            },
                        ]}>
                            <Input style={{ height: '42px', width: '305px', marginTop: '30px', marginBottom: '0px' }} placeholder="请输入密码(6-20位字符)" />
                        </Form.Item>
                       
                      {/* 请再次输入密码 */}
                      <Form.Item name="password"
                        rules={[
                            {
                                required: true,
                                message: '请在次输入密码',
                            },
                        ]}>
                            <Input style={{ height: '42px', width: '305px', marginTop: '10px', marginBottom: '0px' }} placeholder="请再次输入密码" />
                        </Form.Item>

                          {/* 获取验证码 */}
                          <div style={{ position: 'relative' }}>
                        <Form.Item name="forne">
                            <Input style={{ height: '42px', width: '305px',
                            marginTop:'5px',  marginBottom: '15px' }} placeholder="手机验证码" />
                        </Form.Item>
                        <button className='for-hqy'>获取验证码</button>
                    </div>
                    
                   
                    {/* 登录注册 */}
                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Button style={{
                            height: '45px', width: '307px', backgroundColor: '#f08200',borderRadius: '6px',
                            border: 'none',
                            marginLeft: '-102px',
                            marginTop: '-20px'
                        }}
                            type="primary" htmlType="submit">
                            提交
                        </Button>
                    </Form.Item>
                </Form>
            </ul>
        </div>
    )
}
